<template>
    <section class="wimMain">
      <div class="topTitle blue getTop small">
        <span class="goBack" @click="goBack"><i></i></span>
        与 {{sendName}} 聊天中...
      </div>
      <div id="main">
          <div class="webMain">
              <p style="height: .9rem"></p>
              <ul>
                  <li v-for="item in list" :class="{right:item.send_user_id!=sendUid}">
                    <div v-if="item.send_user_id==sendUid" class="tiemLogo">
                      <img class="logo" v-if="avatar!=''" :src="sendAvatar">
                      <img class="logo" v-else :src="defLogo">
                    </div>
                    <div v-if="item.send_user_id!=sendUid" class="tiemLogo">
                      <img class="logo" v-if="sendAvatar!=''" :src="avatar">
                      <img class="logo" v-else :src="defLogo">
                    </div>
                    
                    <!--信息-->
                    <div v-if="item.message_type==1">
                      <div class="tell" v-if="item.message!=''">
                        <span v-html="item.message"></span>
                      </div>
                      <div class="tell" v-if="item.message==''">
                        <img class="bigImg" :src="item.message_image[0]">
                      </div>
                    </div>
                    
                    <!--礼物-->
                    <div v-if="item.message_type==2">
                      
                      <div class="tell">
                        <div class="liwuBg">
                          <img :src="item.ext.gift.image">
                          <p class="liwuName">{{item.ext.gift.name}} x1</p>
                          <p class="liwuMeili">魅力值:+{{item.ext.gift.price/10}}</p>
                        </div>
                      </div>
                    </div>

                    <!--红包-->
                    <div v-if="item.message_type==4">
                      <div class="tell" v-if="item.ext.redpacket_one.status==1">
                        <img @click="getPacket(item,item.id)" class="bigImg" src="/static/images/hong01.png">
                      </div>
                      <div class="tell" v-if="item.ext.redpacket_one.status==2">
                        <img class="bigImg out" src="/static/images/hong01.png">
                      </div>
                      <div class="tell" v-if="item.ext.redpacket_one.status==3">
                        <img class="bigImg out" src="/static/images/hong01.png">
                      </div>
                    </div>
                    
                  </li>
              </ul>
          </div>

          <!-- <div class="sendTop">
                <span @click="faceShow"><img src="/static/images/face.png"></span>
                
              </div> -->

          <div class="sendBox">
              <div class="sendInfo">
                <div class="sendBoxT">
                  <input v-model="txtle" id="send" placeholder="请输入文字..."></input>
                  <span @click="postTxt" class="clickB">发送</span>
                </div>
                <div class="sendBoxB">
                  <a href="javascript:;" class="file"><span><i class="icon01"></i></span><input @change="upImg" type="file" id="image"></a>
                  <span @click="sendPacketBox"><i class="icon02"></i></span>
                  <span @click="sendShow(1)"><i class="icon03"></i></span>
                  <span @click="sendShow(2)"><i class="icon04"></i></span>
                </div>
              </div>
              <div class="sendShow" v-if="moreStart">
                <div class="liwuList" v-if="faceStart==1">
                  <ul>
                    <li @click="sendLiwu(item.id)" v-for="item in liwuList">
                      <p class="img"><img :src="item.image"></p>
                      <span class="price">{{item.price}}</span>
                      <p class="name">{{item.name}}</p>
                    </li>
                  </ul>
                </div>
                <div class="faceList"  v-if="faceStart==2">
                  <ul>
                    <li @click="sendFace(item.key)" v-for="(item,index) in faceList">
                      <!-- <img :src="item.url"> -->
                      <span :class="'face'+(index+1)"></span>
                    </li>
                  </ul>
                </div>

              </div>
          </div>

      </div>

      <div class="packetPop" v-if="packetStatic">
        <div class="info">
            <p class="title">发红包</p>
            <p class="txtle"><span>金额：</span><input type="text" v-model="packetPrice" name=""></p>
            <textarea v-model="packetTxt"></textarea>
            <p class="text"></p>
            <p class="click">
              <span @click="closePacket">取消</span>
              <span @click="sendPacket">发送</span>
            </p>
        </div>
      </div>

      <div class="packetGet" v-if="getPack.static">
          <div class="info">
            <span class="close" @click="closeGetPacket"></span>
            <div class="txtle">
              <p class="price">￥{{getPack.amount}}</p>
              <p class="message">{{getPack.message}}</p>
            </div>
          </div>
      </div>
    </section>
</template>
<script>
import axios from 'axios'
import {Post,Get,PostImg,Put} from '@/config/api.js'
import { mapState } from 'vuex'
import date from '@/assets/js/json.js'

export default {
  name: 'webim1',
  data() {
    return {
        sendUid:this.$route.query.uid,
        sendAvatar:'',
        sendName:'',
        defLogo:'../static/images/deflogo.jpg',
        txtle:'',
        img:'',
        list:[],
        time:'',
        sendStart:false,//发送按钮
        liwuList:'',//礼物列表
        moreStart:false,//打开更多
        faceStart:0,//控制展示
        faceList:date.faceList,
        packetStatic:false,
        packetPrice:'',//红包金额
        packetTxt:'恭喜发财,大吉大利',//红包说明
        getPack:{
          static:false,//红包弹窗
          message:'',//红包文字
          amount:''//红包金额
        }

    }
  },
  computed: {
    ...mapState({
      uid: state => state.uid,
      password: state => state.password,
      nickname: state => state.nickname,
      avatar: state => state.avatar,
    })
  },
  mounted(){
    let h1=$(window).height()
    let h2=$(".topTitle").height()*2
    $('.webMain').css('height',h1-h2)

    if(this.$route.query.active==1){
      this.sendShow(1)
    }

    this.getMe()
    this.getTxt()
    this.getSet()
    this.getLiwu()

  },
  watch:{
    txtle(){
      if(this.txtle==''){
        this.sendStart=false
      }else{
        this.sendStart=true
      }
    }
  },
  methods:{
      //发红包弹窗
      sendPacketBox(){
        this.packetStatic=true
        this.moreStart=false
      },
      //取消发红包
      closePacket(){
        this.packetStatic=false
      },
      //发送红包
      async sendPacket(){
        let data={
          "receive_user_id":this.sendUid,
          "amount":this.packetPrice,
          "message":this.packetTxt
        }
        await Post('/redpacket/chat',this.$store.state.token,data).then((res)=>{
          let data={
            send_user_id:res.data.send_user_id,
            message:'',
            message_image:'',
            message_type:4,
            ext:{
              redpacket_one:{
                status:1
              }
            }
          }
          this.list.push(data)
          setTimeout(function(){
            let h1=$('.webMain').height()
            let h2=$('.webMain ul').height()
            let h3=h2-h1+40
            $('.webMain').animate({ scrollTop: h3 },0)
          },500)
          this.packetStatic=false
        })
      },
      //领取红包
      async getPacket(val,message_id){
        let data={
          "redpacket_one_id":val.ext.redpacket_one.id,
          "message_id":message_id,
        }
        await Put('/redpacket/chat/accept',this.$store.state.token,data).then((res)=>{
          console.log(res)
          this.getPack.message=res.data.message
          this.getPack.amount=res.data.amount
          this.getPack.static=true
          val.ext.redpacket_one.status=2
        })
      },
      //关闭领导红包
      closeGetPacket(){
        this.getPack.static=false
      },
      //发送图片
      async postImg(){
        let num = (new Date()).valueOf()+parseInt(100*Math.random());
        let imgName = "user/say/1001/"+num+".png"
        console.log(imgName)
        console.log(this.img)
        let data={
          "key":imgName,
          "image":this.img
        }
        await PostImg(this.$store.state.token,data).then((res)=>{
          console.log(res)
          this.postTxtImg(res.data.key)
        })

      },
      //发送图片信息
      async postTxtImg(url){
        let date={
          "receive_user_id":this.sendUid,
          "message_image":url
        }
        await Post('/chat/send',this.$store.state.token,date).then((res)=>{
          let data={
            send_user_id:res.data.send_user_id,
            message:this.callBackFace(res.data.message),
            message_image:res.data.message_image,
            message_type:res.data.message_type,
            ext:res.data.ext
          }
          this.list.push(data)
          setTimeout(function(){
            let h1=$('.webMain').height()
            let h2=$('.webMain ul').height()
            let h3=h2-h1+40
            $('.webMain').animate({ scrollTop: h3 },0)
          },500)
        })
      },
      //发送信息
      async postTxt(){
        this.moreStart=false
        if(this.sendStart==true&&this.txtle!=''){
          this.sendStart=false
          let data={
            "receive_user_id":this.sendUid,
            "message":this.txtle
          }
          await Post('/chat/send',this.$store.state.token,data).then((res)=>{
            console.log(res)
            let data={
              id:res.data.id,
              send_user_id:res.data.send_user_id,
              message:this.callBackFace(res.data.message),
              message_image:res.data.message_image,
              message_type:res.data.message_type,
              ext:res.data.ext
            }
            this.list.push(data)
            setTimeout(function(){
              let h1=$('.webMain').height()
              let h2=$('.webMain ul').height()
              let h3=h2-h1+40
              $('.webMain').animate({ scrollTop: h3 },0)
            },500)
          })
          this.txtle=''
          this.sendStart=true
        }
      },
      //获取个人信息
      async getMe(){
        await Get('/user/'+this.sendUid,this.$store.state.token).then((res)=>{
          this.sendAvatar=res.data.avatar
          this.sendName=res.data.nickname
        })
      },
      //获取所有信息
      async getTxt(){
        await Get('/chat/message/'+this.sendUid+'?_include=send_user,receive_user',this.$store.state.token).then((res)=>{
          console.log(res)
          this.list=[]
          let len=res.data.length
          for(let i=0;i<len;i++){
            let ext
            if(res.data[i].ext!=''){
              ext=JSON.parse(res.data[i].ext)
            }
            let data={
              id:res.data[i].id,
              send_user_id:res.data[i].send_user_id,
              message:this.callBackFace(res.data[i].message),
              message_image:res.data[i].message_image,
              message_type:res.data[i].message_type,
              ext:ext
            }
            this.list.unshift(data)
          }
        })
        setTimeout(function(){
          let h1=$('.webMain').height()
          let h2=$('.webMain ul').height()
          let h3=h2-h1+40
          $('.webMain').animate({ scrollTop: h3 },0)
        },500)
      },
      //定时获取信息
      async getTxtTime(){
        await Get('/chat/noread/message/'+this.sendUid+'?_include=send_user,receive_user',this.$store.state.token).then((res)=>{
          if(res.data!=null){
            let ext
            if(res.data.ext!=''){
              ext=JSON.parse(res.data.ext)
            }
            let data={
              id:res.data.id,
              send_user_id:res.data.send_user_id,
              message:this.callBackFace(res.data.message),
              message_image:res.data.message_image,
              message_type:res.data.message_type,
              ext:ext
            }
            this.list.push(data)
            setTimeout(function(){
              let h1=$('.webMain').height()
              let h2=$('.webMain ul').height()
              let h3=h2-h1+40
              $('.webMain').animate({ scrollTop: h3 },0)
            },500)
          }
        })
        
      },
      //返回上一页
      goBack(){
        this.$router.go(-1)
      },
      //打开更多
      sendShow(val){
        this.moreStart=true
        this.faceStart=val
      },
      //选择更多
      sendItem(val){
        this.faceStart=val
      },
      async postTitle(){
        let data={
          "receive_user_id":this.$route.query.uid,
          "message":this.txtle
        }
        console.log(data)
        await Post('/chat/message',this.$store.state.token,data).then((res)=>{
          console.log(res)
        })
      },
      getSet(){
        this.time=setInterval(()=>{
          this.getTxtTime()
        },2000)
      },
      shopSet(){
        clearInterval(this.time)
      },
      faceShow(){
        this.moreStart=true
        this.faceStart=2
      },
      //头像上传
      upImg(e){
        let file = e.target.files[0]; //input 
        if( file.size > 0.3*1024*1024 ){  //用size属性判断文件大小不能超过200k
          alert( "你上传的文件太大了！" ) 
        }else{
          let that=this
          let reader = new FileReader(); 
          reader.readAsDataURL(file); 
          reader.onload = function(e){ 
            var res = this.result; 
            that.img=this.result
            that.postImg()
          } 
        }
      },
      //获取礼物
      async getLiwu(){
        await Get('/gift',this.$store.state.token).then((res)=>{
          console.log(res)
          this.liwuList = res.data
        })
      },
      async sendLiwu(id){
        let data={
          "receive_user_id":this.sendUid,
          "gift_id":id,
          "gift_count":1
        }
        await Post('/gift/send',this.$store.state.token,data).then((res)=>{
          console.log(res)
          let date={
            gift:JSON.parse(res.data.data)
          }
          let data={
            id:res.data.id,
            send_user_id:res.send_user_id,
            message:'',
            message_image:'',
            message_type:2,
            ext:date
          }
          this.list.push(data)
          setTimeout(function(){
            let h1=$('.webMain').height()
            let h2=$('.webMain ul').height()
            let h3=h2-h1+40
            $('.webMain').animate({ scrollTop: h3 },0)
          },500)
          this.moreStart=false
        }).catch((err)=>{
          let data={
            static:true,
            txt:{
              type:2,
              message:err.data.message
            }
          }
          this.$store.dispatch("alert",data)
          setTimeout(() => {
            this.$store.dispatch("alertClose")
          }, 1000)
          this.moreStart=false
        })
      },
      //添加表情
      sendFace(val){
        this.txtle+=val
      },
      callBackFace(val){
        let faca01="<img src='/static/images/faces/ee_1.png' />"
        let faca02="<img src='/static/images/faces/ee_2.png' />"
        let faca03="<img src='/static/images/faces/ee_3.png' />"
        let faca04="<img src='/static/images/faces/ee_4.png' />"
        let faca05="<img src='/static/images/faces/ee_5.png' />"
        let faca06="<img src='/static/images/faces/ee_6.png' />"
        let faca07="<img src='/static/images/faces/ee_7.png' />"
        let faca08="<img src='/static/images/faces/ee_8.png' />"
        let faca09="<img src='/static/images/faces/ee_9.png' />"
        let faca10="<img src='/static/images/faces/ee_10.png' />"

        let faca11="<img src='/static/images/faces/ee_11.png' />"
        let faca12="<img src='/static/images/faces/ee_12.png' />"
        let faca13="<img src='/static/images/faces/ee_13.png' />"
        let faca14="<img src='/static/images/faces/ee_14.png' />"
        let faca15="<img src='/static/images/faces/ee_15.png' />"
        let faca16="<img src='/static/images/faces/ee_16.png' />"
        let faca17="<img src='/static/images/faces/ee_17.png' />"
        let faca18="<img src='/static/images/faces/ee_18.png' />"
        let faca19="<img src='/static/images/faces/ee_19.png' />"
        let faca20="<img src='/static/images/faces/ee_20.png' />"

        let faca21="<img src='/static/images/faces/ee_21.png' />"
        let faca22="<img src='/static/images/faces/ee_22.png' />"
        let faca23="<img src='/static/images/faces/ee_23.png' />"
        let faca24="<img src='/static/images/faces/ee_24.png' />"
        let faca25="<img src='/static/images/faces/ee_25.png' />"
        let faca26="<img src='/static/images/faces/ee_26.png' />"
        let faca27="<img src='/static/images/faces/ee_27.png' />"
        let faca28="<img src='/static/images/faces/ee_28.png' />"
        let faca29="<img src='/static/images/faces/ee_29.png' />"
        let faca30="<img src='/static/images/faces/ee_30.png' />"

        let len=val.length
        for(let i=0;i<len;i++){
          if(val.indexOf("[):]")>-1){
            val = val.replace("[):]",faca01);
          }
          if(val.indexOf("[:D]")>-1){
            val = val.replace("[:D]",faca02);
          }
          if(val.indexOf("[;)]")>-1){
            val = val.replace("[;)]",faca03);
          }
          if(val.indexOf("[:-o]")>-1){
            val = val.replace("[:-o]",faca04);
          }
          if(val.indexOf("[:p]")>-1){
            val = val.replace("[:p]",faca05);
          }
          if(val.indexOf("[(H)]")>-1){
            val = val.replace("[(H)]",faca06);
          }
          if(val.indexOf("[:@]")>-1){
            val = val.replace("[:@]",faca07);
          }
          if(val.indexOf("[:s]")>-1){
            val = val.replace("[:s]",faca08);
          }
          if(val.indexOf("[:$]")>-1){
            val = val.replace("[:$]",faca09);
          }
          if(val.indexOf("[:(]")>-1){
            val = val.replace("[:(]",faca10);
          }

          if(val.indexOf("[:\'(]")>-1){
            val = val.replace("[:\'(]",faca11);
          }
          if(val.indexOf("[:|]")>-1){
            val = val.replace("[:|]",faca12);
          }
          if(val.indexOf("[(a)]")>-1){
            val = val.replace("[(a)]",faca13);
          }
          if(val.indexOf("[8o|]")>-1){
            val = val.replace("[8o|]",faca14);
          }
          if(val.indexOf("[8-|]")>-1){
            val = val.replace("[8-|]",faca15);
          }
          if(val.indexOf("[+o(]")>-1){
            val = val.replace("[+o(]",faca16);
          }
          if(val.indexOf("[<o)]")>-1){
            val = val.replace("[<o)]",faca17);
          }
          if(val.indexOf("[|-)]")>-1){
            val = val.replace("[|-)]",faca18);
          }
          if(val.indexOf("[*-)]")>-1){
            val = val.replace("[*-)]",faca19);
          }
          if(val.indexOf("[:-#]")>-1){
            val = val.replace("[:-#]",faca20);
          }

          if(val.indexOf("[:-*]")>-1){
            val = val.replace("[:-*]",faca21);
          }
          if(val.indexOf("[^o)]")>-1){
            val = val.replace("[^o)]",faca22);
          }
          if(val.indexOf("[8-)]")>-1){
            val = val.replace("[8-)]",faca23);
          }
          if(val.indexOf("[(|)]")>-1){
            val = val.replace("[(|)]",faca24);
          }
          if(val.indexOf("[(u)]")>-1){
            val = val.replace("[(u)]",faca25);
          }
          if(val.indexOf("[(S)]")>-1){
            val = val.replace("[(S)]",faca26);
          }
          if(val.indexOf("[(*)]")>-1){
            val = val.replace("[(*)]",faca27);
          }
          if(val.indexOf("[(#)]")>-1){
            val = val.replace("[(#)]",faca28);
          }
          if(val.indexOf("[(R)]")>-1){
            val = val.replace("[(R)]",faca29);
          }
          if(val.indexOf("[({)]")>-1){
            val = val.replace("[({)]",faca30);
          }
        }
        return val
      }

  },

  beforeDestroy(){
    this.shopSet()
  }

}

</script>
